<template>
	<view class="page solid-top">
		<!-- 商品信息 start -->
		<view class="evalue-item bg-white">
			<view class="evalue-item-content flex justify-between margin-bottom-sm">
				<view class="evalue-item-img">
					<fu-image :src="goods.thumb" mode="aspectFill"></fu-image>
				</view>
				<view class="evalue-item-info">
					<view class="evalue-item-name text-df text-333 text-cut-2">{{ goods.name }}</view>
					<!-- <view class="evalue-item-sku text-df text-sm text-999">{{ goods.sku_name }}</view> -->
					<view class="order-price flex justify-between align-center">
						<text class="text-price text-lg text-bold ">{{ goods.shop_price }}</text>
						<!-- <text class="text-999 text-sm">x{{ goods.num }}</text> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 商品信息 end -->
		<view class="line">
		</view>
		<!-- 商品评价 start -->
		<view class="evalue-list">
			<view class="evalue-title">
				<text class="text-333 text-xl text-bold">用户评价</text>
				<text class="margin-left-xs text-333 text-xl text-bold">({{listData.length}})</text>
			</view>
			<view class="padding-bottom-sm solid-bottom" v-for="item in listData" :key="item.name">
				<fu-evaluate-one :prop="item"></fu-evaluate-one>
				<view class="flex justify-between">
					<text class="text-sm text-999" v-if="item.key_name">{{item.key_name}}</text>
					<view class="flex align-center flex-sub justify-end" @click="replayEvalue(item)">
						<image class="relpy-icon margin-right-xs" src="../../static/reply-icon.png" mode=""></image>
						<text class="text-sm" style="color: #FC9C3A;">回复</text>
					</view>
				</view>
				<view class="reply-box text-sm" v-if="item.reply_content.length>0">
					<block v-for="(reply,index) in item.reply_content">
						<view class="margin-top">
							<text class="color-bule" v-if="reply.is_merchant!==1">{{reply.user_nickname}}回复：</text>
							<text class="color-bule" v-else>回复：</text>
							<text>{{reply.content}}</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 商品评价 end -->
		<!-- 空状态 start-->
		<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
			:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
		<!-- 空状态 end -->
		<!-- 断网检测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网检测 end -->
		<view class="" v-if="replyShow">
			<view class="serve-mask" @click="replyShow = false"></view>
			<view class="serve-pop flex align-center justify-center" :style="{bottom:keyboardheight+'px'}">
				<input type="text" placeholder="请填写回复内容" v-model='replayContent' focus
					:adjust-position='false' placeholder-class="placeholderServe">
				<button @click='sureEvalue'>发布</button>
			</view>
		</view>
	</view>

</template>

<script>
	// 引入评论组件
	import fuEvaluateOne from "../../components/fu-evaluate-one/fu-evaluate.vue";
	//引入混入
	import paging_list from '@/common/mixin/paging_list.js';
	export default {
		components: {
			fuEvaluateOne
		},
		mixins: [paging_list],
		data() {
			return {
				goods: {
					thumb: '', //图片
					name: '', //商品title
					shop_price: 0, //价格
					id: 0
				},
				evalueList: [],
				allowOnloadGetList: false,
				// minixPagingListsApi: global.apiUrls.getShopOrderList, //混入获取列表接口名
				minixPagingListsApi: global.apiUrls.getEvalueList, //混入获取列表接口名
				pageingListApiMethod: 'post', //接口类型属于post
				evalueShow: false, //评论弹框
				content: '', //评论内容
				id: 0, //评论id,
				replyShow: false,
				keyboardheight: 0, // 键盘高度
				replayContent: ''
			};
		},
		onLoad(options) {
			let {
				item
			} = options;
			let goods = JSON.parse(item);
			this.goods = goods;
			// 监听键盘高度
			uni.onKeyboardHeightChange(res => {
				console.log('键盘监听', res);
				this.keyboardheight = res.height;
			});
			// 获取评论数据
			this.allowOnloadGetList = true;
			this.pagingListGetLists();
		},
		methods: {
			replayEvalue(item) {
				this.id = item.id;
				this.replyShow = true
			},
			// 去评价详情
			goDetail(val) {
				// pages/order/evalue/comment-detail/index
				this.$urouter.navigateTo({
					url: '/pages/order/evalue/comment-detail/index',
					params: val
				});
			},
			/**
			 * @description 混入传参钩子函数
			 * @param type 获取数据类型 type 1为收藏列表 3为浏览历史
			 */
			pagingListPostData() {
				return {
					goods_id: this.goods.id
				};
			},
			handleReplay(id) {
				this.evalueShow = true;
				this.id = id;
			},
			sureEvalue() {
				if (!this.replayContent.trim()) {
					this.$message.info('请输入回复内容');
					return;
				}
				this.$api.post(global.apiUrls.comment_reply, {
					gc_id: this.id,
					content: this.replayContent,
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.$message.success('回复成功');
						this.replyShow = false;
						this.replayContent = '';
						this.pagingListToggle();
					} else {
						this.$message.info(res.data.msg);
					}
					this.evalueShow = false;
				}).catch(err => {
					this.evalueShow = false;
					console.log(err);
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	// 商品信息 start
	.evalue-item {
		padding: 40rpx 32rpx 0;
		box-sizing: border-box;
	}

	.evalue-item-content {
		padding-bottom: 20rpx;

		.evalue-item-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
			overflow: hidden;
			background: #eeeeee;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.evalue-item-info {
			width: calc(100% - 204rpx);

			.evalue-item-name {
				height: 76rpx;
			}

			.evalue-item-sku {
				padding: 16rpx 0 40rpx;
			}

			.order-price {
				margin-top: 60rpx;

				text {
					&:nth-child(1) {
						color: red;
					}
				}
			}
		}
	}

	// 商品信息 end
	.line {
		height: 20rpx;
		background-color: #F8F8F8;
	}

	// 商品评价 start
	.evalue-list {
		padding: 40rpx 32rpx 0;
		box-sizing: border-box;

		.evalue {}

		.evalue-title {
			line-height: 80rpx;
			position: relative;
			margin-left: 10rpx;
		}

		.evalue-title::before {
			position: absolute;
			width: 8rpx;
			height: 32rpx;
			background-color: $bgtheme;
			left: -15rpx;
			top: 50%;
			transform: translate(0, -63%);
			content: '';
			border-radius: 4rpx;
		}

		.evalue-btn {
			width: 130rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: $theme;
			border: 1px solid #FF5001;
			border-radius: 24rpx;
		}

		.evalue-btn2 {
			margin-left: 20rpx;
			width: 160rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: $theme;
			border: 1px solid #FF5001;
			border-radius: 24rpx;
		}
	}

	// 商品评价 end
	// 评论内容 start
	uni-textarea {
		width: 100%;
	}

	.bg-lg {
		background: linear-gradient();
	}

	// 评论内容 end
	.relpy-icon {
		height: 24rpx;
		width: 26rpx;
	}

	.color-bule {
		color: #1A76F2;
	}

	.reply-box {
		display: flex;
		flex-direction: column;
		background-color: #F8F8F8;
		padding: 0 24rpx 24rpx 24rpx;
		margin-top: 24rpx;
	}

	.serve-pop {
		height: 100rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 11111;

		input {
			margin-left: 32rpx;
			width: 528rpx;
			height: 66rpx;
			background: #f6f7f9;
			opacity: 1;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #99999a;
			text-indent: 1em;
			padding-left: 20rpx;
			padding-right: 10rpx;
		}

		button {
			width: 140rpx;
			height: 66rpx;
			background: $bgtheme;
			border-radius: 33rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}
</style>
